<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/api.css">
		<style>
			.flex-con {
				overflow: hidden;
			}
			.input {
				margin-top: 30px;
				padding: 0 15px;
				background-color: white;
				border: 1px solid #ddd;
				border-width: 1px 0;
			}
			.input .flex-wrap {
				background-position: left center;
				background-size: 18px auto;
				position: relative;
				padding: 17px 10px 12px 33px;
				font-size: 13px;
			}
			.input .flex-wrap+ .flex-wrap {
				border-top: 1px solid #ddd;
			}
			.input .flex-wrap input {
			}
			.input .flex-wrap .ic-eye {
				width: 45px;
				height: 45px;
				background-position: center 18px;
				position: absolute;
				right: 0;
				top: 0;
				background-size: 18px auto;
			}
			.input .flex-wrap .ic-eye.active {
				background-position: center -15px;
			}
			.input .flex-wrap .get-code {
				color: #333333;
				background-color: #f3d41d;
				border-radius: 6px;
				line-height: 25px;
				height: 25px;
				padding: 0 15px;
				position: absolute;
				right: 0;
				top: 10px;
			}
			.input .flex-wrap .get-code.disable {
				background-color: #ededed;
				color: #999;
			}
			.btns {
				padding: 50px 22px;
			}
			.btns .submit {
				background-color: #f3d41d;
				color: #333333;
				line-height: 35px;
				border-radius: 35px;
				text-align: center;
				font-size: 15px;
			}
		</style>
	</head>
	<body class="flex-wrap flex-vertical">
		<div class="flex-con">
			<div class="input">
				<div class="flex-wrap ic-phone" >
					<input oninput="fnVerifyInput({ type: 'number', el: this});" class="flex-con phone" placeholder="请输入手机号码" />
					<div tapmode="opacity" onclick="fnRequestSendVerifyCode( this )" class="get-code">
						获取验证码
					</div>
				</div>
				<div class="flex-wrap ic-msg" >
					<input class="flex-con verifyCode" type="number" placeholder="请输入验证码" />
				</div>
				<div class="flex-wrap  ic-lock" >
					<input class="flex-con newPassword" type="password" placeholder="请输入登录密码" />
					<div tapmode="opacity" onclick="fnEye(this)" class="ic-eye"></div>
				</div>
			<!--	<div class="flex-wrap  ic-lock" >
					<input class="flex-con confirmPassword" type="password" placeholder="再次输入密码" />
					<div tapmode="opacity" onclick="fnEye(this)" class="ic-eye"></div>
				</div>-->
			</div>
			<div class="btns">
				<div tapmode="opacity" onclick="fnResetPassword()" class="submit">
					重置密码
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<script type="text/javascript">
				var startTs;
		apiready = function(){
		//		alert( JSON.stringify( api.pageParam ) )
		}
		function fnResetPassword(){
		var userName = $api.dom( '.phone' ),
		verifyCode = $api.dom( '.verifyCode' ),
		newPassword = $api.dom( '.newPassword' ),
		confirmPassword = $api.dom( '.confirmPassword' );;
		if( ! userName.value.trim() ){
		fnPopup({msg:'请输入手机号码'})
		}else if( ! verifyCode.value.trim() ){
		fnPopup({msg:'请输入验证码'})
		}else if( ! newPassword.value.trim() ){
		fnPopup({msg:'请输入新密码'})
		}else if( newPassword.value.length <= 0 ){
		fnPopup({msg:'密码不能为空'})
		}
//		else if( ! confirmPassword.value.trim() ){
//		fnPopup({msg:'请确认密码'})
//		}else if( confirmPassword.value !== newPassword.value ){
//		fnPopup({msg:'确认密码有误！'})
//		}
		else{
		api.showProgress({
		animationType: 'zoom',
		title: '正在重置'
		});
		api.execScript({
		name: 'root',
		script: 'fnResetPassword('+JSON.stringify({
		winName: api.winName,
		frameName: api.frameName,
		userName: userName.value,
		newPassword: newPassword.value,
		verifyCode: verifyCode.value
		})+')'
		});
		}
		}
		function fnEye( el){
		if( $api.hasCls( el, 'active' ) ){
		$api.removeCls( el, 'active' );
		$api.closest( el, '.ic-lock' ).querySelector( 'input' ).setAttribute( 'type', 'password' );
		}else{
		$api.addCls( el, 'active' );
		$api.closest( el, '.ic-lock' ).querySelector( 'input' ).setAttribute( 'type', 'text' );
		}
		}
		function receive_fnResetPassword( ret, err){
		if( ret ){
		if( ret.errorCode === 0 ){
		fnPopup({msg:'重置成功'}, function(){
		api.closeWin();
		});
		}
		}else{
		fnNotes( err );
		}
		api.hideProgress();
		}
	function fnRequestSendVerifyCode(el) {
			if (! $api.hasCls(el, 'disable')) {
				var phone = $api.dom('.phone');
				if (! phone.value.trim()) {
					fnPopup({
						msg : '请输入手机号码'
					})
				} else {
					api.showProgress({
						animationType : 'zoom',
						title : '正在发送'
					});
					api.execScript({
						name : 'root',
						name : 'root',
						script : 'fnRequestSendVerifyCode(' + JSON.stringify({
							winName : api.winName,
							frameName : api.frameName,
							phone : phone.value
						}) + ')'
					});
				}
			}
		}

	function receive_fnRequestSendVerifyCode(ret, err) {
			if (ret) {
				startTs = Math.floor(Date.now() / 1000);
				fnCountDown(startTs + 60);
				fnPopup({
					msg : '发送成功'
				}, function() {
				});
			} else {
				fnPopup({
					msg : '短信发送失败'
				}, function() {
				});
			}
			api.hideProgress();
		}



		function receive_( ret, err){
		if (ret) {
		startTs = Math.floor(Date.now() / 1000);
		fnCountDown( startTs+60 );
		fnPopup({
		msg: '发送成功'
		}, function() {
		});
		} else {
		fnPopup({
		msg: '短信发送失败'
		}, function() {
		});
		}
		api.hideProgress();
		}
		function fnCountDown( num ){
		var el = $api.dom('.get-code');
		setTimeout(function(){
		var currentTs = Math.floor(Date.now() / 1000);
		var timeout = num - currentTs;
		if( timeout <= 0 ){
		$api.removeCls( el, 'disable' );
		el.innerHTML = '获取验证码';
		}else{
		if( !$api.hasCls(el, 'disable') )$api.addCls( el, 'disable' );
		el.innerHTML = timeout + 's 后重试';
		fnCountDown( num )
		}
		},250);
		}
	</script>
</html>